<template lang="pug">
	.pug-wrap
		//- - let cl = 'bg';
		//- div.bg-a( class=cl :class="{'size': show}" @click="handleClick('click')" ) click

		//- input(type='checkbox' :checked='show')

		//- style属性
		//- div(:style="styleObj" style={width: '300px', height: '100px', backgroundColor: 'blue'})
		//- div(style={width: '300px', height: '100px', backgroundColor: 'blue'} :style="styleObj")

		//- class属性
		//- - let classes = ['bg', 'bg-a', 'size'];
		//- div(class=classes) click
		//- div(class=classes class="f-c") click
		//- div(class=classes class=['f-c']) click

		//- - let bool = true;
		//- div(class=classes class={'f-c': bool}) click
		//- div(class=classes :class="{'f-c': show}") click

		//- &attributes
		//- - let attributes = {};
		//- - attributes.class = 'bg size';
		//- - let attributes = this.attrObj;  // 无效
		//- div#foo(data-bar="foo")&attributes(attributes)

		.bg(v-for="(item, index) in arr" :key="index")
			template(v-if="index > 0") {{ show? item.name : ''}}


</template>

<script>
	export default {
		name: "HelloWorld",
		data() {
			return {
				text: "hello",
				show: true,
				styleObj: {
					width: "200px",
					height: "50px",
					backgroundColor: "bisque"
				},
				attrObj: {
					class: "bg size"
				},
				arr: [{ name: "a" }, { name: "b" }]
			};
		},
		methods: {
			handleClick(msg) {
				console.log(msg);
				this.show = !this.show;
			},
			getClass() {
				return "bg";
			}
		}
	};
</script>

<style scoped>
	.bg-a {
		background: blue;
	}

	.bg {
		width: 200px;
		height: 50px;
		background: bisque;
	}

	.size {
		font-size: 20px;
	}

	.f-c {
		color: #fff;
	}
</style>
